import type { questionComponentType, QuestionInfoPropsType } from "@/utils/type"
import { useEffect } from "react"
import { Form, Input } from "antd"

const { TextArea } = Input;

type propsType = questionComponentType & {
  onChange: (value: QuestionInfoPropsType) => void
}



const InfoPropComponent = (props: propsType)=> {
  const [form] = Form.useForm();
  const { title='', desc='' } = props.props;

  

  const handleChange = () => {
    props.onChange(form.getFieldsValue())
  }

  useEffect(() => {
    form.setFieldsValue({ title, desc })
  }, [title, desc, form])

  return (
    <Form
      onValuesChange={handleChange}
      layout="vertical"
      initialValues={{ title, desc }}
      form={form}
      disabled={props.isLocked}
    >
      <Form.Item name="title" label="问卷标题：" rules={[{ required: true, message: '请输入标题' }]}>
        <Input></Input>
      </Form.Item>

      <Form.Item name="desc" label="问卷描述..." rules={[{ required: true, message: '请输入描述内容...' }]}>
        <TextArea></TextArea>
      </Form.Item>

    </Form>
  )
}
export default InfoPropComponent
